<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">平台估价管理</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox" style="padding: 20px 20px">
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 公司名 -->
          <div class="input_valye">
            <span class="demonstration">公司名：</span>
            <input type="text" class="input" placeholder="请输入公司名" style="width: 180px"
              v-model="searchValue.companyName"  @keyup.enter="search" />
          </div>
          <!-- 区域 -->
          <div class="input_valye">
            <span class="demonstration">区域：</span>
            <el-cascader v-model="address" :options="regionData" @change="addchange" filterable style="width: 180px" />
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" style="padding: 20px">
        <!-- 表格区域 -->
        <el-table id="out-table" :data="tableData" :header-cell-style="{ 'text-align': 'center' }"
          :show-overflow-tooltip="true" v-adaptive border>
          <el-table-column prop="id" label="公司编号" align="center" />
          <el-table-column prop="companyName" label="公司名" align="center" />
          <el-table-column prop="address" label="公司地址" align="center" />
          <el-table-column prop="legalPersonName" label="法人姓名" align="center" />
          <el-table-column label="操作" width="250" class="operation">
            <template #default="item">
              <div class="table_btn">
                <el-button class="none" @click="look(item.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager v-model:current-page="searchValue.page" v-model:page-size="searchValue.rows" :total="Number(total)"
          @change="pageChange" />
      </div>
    </div>
    <!-- 审核信息 -->
    <div class="plateform" v-if="mask">
      <div class="title1">
        <div class="title_mes">查看估价信息</div>
        <span class="close" @click="maskBtn1">✖</span>
      </div>
      <div class="content1">
        <div style="margin-top: 20px">
          <el-table :data="auditList" border style="width: 100%">
            <el-table-column prop="carType" label="类别" align="center" />
            <el-table-column prop="nickName" label="通俗类别" align="center" />
            <el-table-column label="吨位区间" align="center">
              <template #default="item"> {{ item.row.carWeightMin }} - {{ item.row.carWeightMax }} </template>
            </el-table-column>
            <el-table-column prop="hubType" label="轮毂类型" align="center" />
            <el-table-column label="扣杂系数" align="center">
              <template #default="item"> {{ item.row.deductRatio * 100 }}% </template>
            </el-table-column>
            <el-table-column label="三元催化(元)" prop="sanYuanPrice" align="center" width="180" />
            <el-table-column prop="price" label="到厂价" align="center" />
            <el-table-column label="业务员收车价(元)" prop="salesmanPrice" align="center" width="180" />
            <el-table-column label="运补(元)" prop="transSubsidy" align="center" width="180" />
            <el-table-column label="是否过磅" align="center" width="100">
              <template #default="item">
                <el-switch v-model="item.row.fNeedWeigh" :disabled="true" />
              </template>
            </el-table-column>
            <el-table-column label="是否启用" align="center">
              <template #default="item">
                <el-switch v-model="item.row.enable" :disabled="true" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div id="mask1" v-if="mask" @click="maskBtn1"></div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { RequestCompaniesGetList, RequestShopValuation } from '@/api/path/index.js';
import { regionData } from 'element-china-area-data';
const tableData = ref<any>([]); // 表格列表
const total = ref(0); //表格总数
const radio = ref('');
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestCompaniesGetList();
};
// 挂载
onMounted(() => {
  requestCompaniesGetList();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});
const requestCompaniesGetList = async () => {
  const a = await RequestCompaniesGetList(searchValue.value);
  tableData.value = a.resultObj.companiesList;
  total.value = a.resultObj.count;
  console.log('获取成功', tableData.value);
};
// 搜索参数
const searchValue = ref({
  companyName: '',
  address: '',
  status: '1',
  page: 1,
  rows: 10,
});
const address = ref();
const addchange = (e) => {
  searchValue.value.address = e.join(',');
  search()
};
/**
 * 搜索
 */
const search = async () => {
  searchValue.value.page = 1;
  requestCompaniesGetList();
};
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    companyName: '',
    address: '',
    status: '1',
    page: 1,
    rows: 10,
  };
  requestCompaniesGetList();
  radio.value = '';
  address.value = '';
};

/**
 * 点击查看
 */
const btnShow = ref(false);
const mes = ref<any>();
const auditList = ref<any>([]); //审核表格
const look = async (item: any) => {
  mask.value = true;
  mask.value = true;
  if (item.auditStatus == 0) {
    btnShow.value = true;
  } else {
    btnShow.value = false;
  }
  console.log('fffffffffffff', btnShow.value);
  auditList.value = [];
  const a = await RequestShopValuation(item.node);
  console.log(123, a.resultObj);
  mes.value = a.resultObj;
  for (let i = 0; i < mes.value.length; i++) {
    auditList.value = auditList.value.concat(mes.value[i]);
  }
  console.log('获取成功', auditList.value);
};
const mask = ref(false);
/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

/**
 * 查看审核
 */
.plateform {
  width: 70%;
  height: 85%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 7.5%;
  left: 15%;

  .content1 {
    height: calc(100% - 100px);
    overflow-y: scroll;
  }

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #6c6c6c;
    }
  }

  .list {
    width: 100%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .list_box {
      width: 31%;
      font-size: 14px;
      color: #3d3d3d;
      line-height: 22px;
      margin-right: 2%;
      margin-bottom: 14px;
    }

    .list_box:last-child {
      width: auto;
    }
  }
}

::v-deep .el-table--fit {
  height: calc(100% - 80px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.btn {
  width: 150px;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

:deep(.el-input__wrapper) {
  width: 150px;
}

.el-table .warning-row {
  background: #44a2ff !important;
}

::deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
  z-index: initial !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  z-index: initial !important;
}
</style>
